<template>
  <div id="wrapper">
    <el-row>
      <el-col :xs="24" :sm="24" :lg="24" class="primary">质量KPI月报</el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
    </el-row>

    <el-row>      
      <el-col :xs="24" :sm="24" :lg="24" style="position: relative">
        <v-choose :isShowKpiData="true" ref="choose"></v-choose>
        <el-button @click="toNewReport" type="primary" class="newReport">新增报告</el-button>
      </el-col>  
    </el-row>

    <el-table 
      v-if="initTableList"
      class="marT"
      :data="initTableList.slice((current-1)*size, current*size)" 
      :border="true"
      :header-cell-style="{background:'#eef1f6'}"
      style="width:100%;padding: 20px">
        <el-table-column align="center" property="month" label="日期" width="200"></el-table-column>
        <el-table-column align="center" property="group_name" label="组织" width="250"></el-table-column>
        <el-table-column align="center" property="creator" label="创建人" width="200"></el-table-column>
        <el-table-column align="center" property="create_time" label="创建时间" width="250"></el-table-column>          
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div class="box">
              <div class="details" @click="toDetails(scope.row.id)">查看详情</div>            
            </div>
          </template>
        </el-table-column>
    </el-table>
    <el-pagination
      v-show="total > 10"
      background
      layout="prev, pager, next"
      :page-size="size"                                       
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="current"                                         
      style="text-align: center"
      :total="total">
    </el-pagination>

    <el-dialog
      title="新增质量KPI月报"
      :visible.sync="dialogVisible"
      width="100%"
      >
      <transition name="fade">
        <div class="toTop" @click="toTop">
          <el-image
            style="width: 50px; height: 50px"
            :src="imgUrl"
            fit="cover"></el-image>
        </div>
      </transition>     
      <v-company 
        ref="top"
        @initTable="initTable($event)"
        @closeDialog="dialogVisible = false" 
        @beforePDF="boforePdf" 
        :pdfStatus="pdfStatus"
        :isDetails="false"
        ></v-company>
      
    </el-dialog>
  </div>
</template>

<script>
  import VChoose from '@/views/summary/choose'
  import VCharts from '@/components/charts/index'
  import VLabel from '@/components/qa/Label'
  import VCompany from '@/views/report/qualityKpi/company'
  import { mapState } from 'vuex'
  import http from '@/views/sys/axios'

  export default {
    name: 'ReportKpi',
    components: {
      VChoose,
      VCharts,
      VLabel,
      VCompany
    },
    data() {
      return {
        size: 10,
        current: 1,
        total: 0,
        dialogVisible: false,
        initTableList: [],
        group_selector: [],
        pdfStatus: false,
        inputStatus: false,
        imgUrl: require('../../../assets/top.png')
      }
    },
    computed: {
      ...mapState({
        chooseList: state => state.chooseList
      }),
    },
    mounted() {  
      this.initTable()  
      console.log(this.chooseList)  
      // setTimeout(() => {
      //   this.group_selector = this.$refs.choose.group_selector
      // }, 1000)
    },
    methods: {
      currentChange(val) {
        this.current = val
      },
      sizeChange(val) {
        this.size = val
      },
      toTop() {
        this.$refs.top.$el.scrollIntoView({behavior: "smooth"})
      },
      boforePdf() {
        this.pdfStatus = true
        // this.inputStatus = true
        this.$message({
          message: '请您填写相关的分析/建议!',
          type: 'warning'
        })
        // let top = this.$refs.top.offsetTop
        this.$refs.top.$refs.kpi.$el.scrollIntoView({behavior: "smooth"})
      },
      toNewReport() {
        this.dialogVisible = true
      },
      initList() {
        let group
        this.chooseList.radio == 1 ? group = '' : group = this.chooseList.groupId
        http.get(`/api/report/examine/list?groupId=${group}&time=${this.chooseList.monthKpi}`)
        .then(res => {
          if(res.code === 200) {
            this.initTableList = res.report_list
          }
        })
      },
      initTable(data) {       
        this.initTableList = data
      },      
      toDetails(id) {        
        let groupName
        if(this.chooseList.radio === 2) {
          groupName = this.chooseList.groupValue
        } else {
          groupName = '集团'
        }
        let groupId = this.chooseList.radio === 1 ? '' : this.chooseList.groupId
        
        this.$router.push({
          path: `/detailsKpi`,
          query: { id, groupId: groupId, groupName: groupName, time: this.chooseList.monthKpi}
        })
      }
    },
    watch: {
      dialogVisible(newVal) {
        if(!newVal) {
          this.pdfStatus = false
        }
      },
      chooseList: {
        handler: function() {        
          if(!this.dialogVisible) {
            this.initList()
          }      
        },
        deep: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../assets/common/common.scss';
  /deep/ .el-table th.gutter{
    display: table-cell!important;
  }
  /deep/ .el-dialog {
    background-color: #eeeeee;
  }
  /deep/ .el-divider__text {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    background-color: #e6a23c;
    padding: 6px 16px;
  }
  /deep/ .el-divider--horizontal {
    margin: 40px 0;
    height: 2px;
  }
  .newReport{
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .toTop{
    position: fixed;
    bottom: 80px;
    right: 25px;
    z-index: 10;
  }
  #wrapper{
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

  }
  .border{
      box-sizing: content-box;
      height: 0;
      overflow: visible;
      margin-top: 1rem;
      margin-bottom: 1rem;
      border: 0;
      border-top: 1px solid rgba(0,0,0,.1);
  }
  .primary{
      color: #409EFF;
      font-size: 30px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 400;
  }
  .bgColor{
      background: #fff;
  }
  .pad{
      padding: 0 20px;
      padding-top: 20px;
  }
  .marT{
      margin-top: 20px;
  }
  .btn-group{
    text-align: right;
  }
  .mar{
        margin: 0 20px;
        margin-top: 20px;
    }
  .table{
      padding-bottom: 10px;
  }
  .details{
    text-decoration: underline;
    color: #1682e6;
    cursor: pointer;
  }
</style>